<template>
  <KrdPage>
    <!-- 大事件slider -->
    <swiper
      class="swiper"
      indicator-dots
      autoplay
      interval="5000"
      duration="1000"
    >
      <swiper-item v-for="(item, index) in sliderItems" :key="index">
        <image :src="item.image" class="slider-image" mode="aspectFill" />
        <view class="slider-text">{{ item.text }}</view>
      </swiper-item>
    </swiper>

    <!-- 公司简介 -->
    <view class="section company-intro">
      <view class="section-title">公司简介</view>
      <view class="content-wrapper">
        <view class="text-content">
          <text class="intro-text">
            四川凯睿达环保科技公司是一家专注于污水处理技术研发与应用的高新技术企业。
            公司致力于提供高效、节能、环保的污水处理解决方案，服务于工业、市政等多个领域。
            我们拥有一支专业的技术团队和丰富的项目经验，在行业内享有良好声誉。
          </text>
        </view>
        <view class="image-content">
          <image
            src="/static/slider2.jpg"
            class="intro-image"
            mode="aspectFill"
          />
        </view>
      </view>
    </view>

    <!-- 合作专家 -->
    <view class="section experts">
      <view class="section-title">合作专家</view>
      <view class="content-wrapper">
        <view class="image-content">
          <image
            src="/static/avatar1.jpg"
            class="expert-image"
            mode="aspectFill"
          />
        </view>
        <view class="text-content">
          <text class="expert-name">张教授</text>
          <text class="expert-title">环境工程专家</text>
          <text class="expert-bio">
            拥有20年环境工程研究经验，专注于污水处理技术研发，
            在国内外核心期刊发表论文50余篇，获得多项专利技术。
          </text>
        </view>
      </view>
    </view>

    <!-- 合作院校 -->
    <view class="section universities">
      <view class="section-title">合作院校</view>
      <view class="content-wrapper">
        <view class="text-content">
          <text class="university-name">清华大学环境学院</text>
          <text class="university-desc">
            国内顶尖的环境科学研究机构，与我公司共同开展多项技术合作项目，
            在污水处理、资源回收等领域取得重要突破。
          </text>
        </view>
        <view class="image-content">
          <image
            src="/static/slider3.jpg"
            class="university-image"
            mode="aspectFill"
          />
        </view>
      </view>
    </view>

    <!-- 污水处理设备工作流程图 -->
    <view class="section">
      <view class="section-title">工作流程</view>
      <image
        src="/static/workflow.png"
        class="workflow-image"
        mode="widthFix"
      />
    </view>

    <!-- 合作企业LOGO -->
    <view class="section">
      <view class="section-title">合作企业</view>
      <view class="logo-container">
        <image
          v-for="(logo, index) in partnerLogos"
          :key="index"
          :src="logo"
          class="partner-logo"
          mode="aspectFit"
        />
      </view>
    </view>

    <!-- 联系方式 -->
    <view class="section">
      <view class="section-title">联系我们</view>
      <view class="contact-info">
        <text>电话: 123-456-7890</text>
        <text>邮箱: info@krd.com</text>
        <text>地址: 某某市某某区某某路123号</text>
      </view>
    </view>
  </KrdPage>
</template>

<script setup lang="ts">
import { ref } from "vue";
import KrdPage from "@/components/KrdPage.vue";

const sliderItems = ref([
  { image: "/static/slider1.jpg", text: "KRD污水处理科技公司成立" },
  { image: "/static/slider2.jpg", text: "首个大型污水处理项目竣工" },
  { image: "/static/slider3.jpg", text: "获得ISO9001质量管理体系认证" },
]);

const partnerLogos = ref([
  "/static/logo1.png",
  "/static/logo2.png",
  "/static/logo3.png",
  "/static/logo4.png",
  "/static/logo1.png",
  "/static/logo2.png",
  "/static/logo3.png",
  "/static/logo3.png",
  "/static/logo4.png",
]);
</script>

<style>
.swiper {
  width: 100%;
  height: 400rpx;
  margin-bottom: 40rpx;
  border-radius: 20rpx;
  overflow: hidden;
}

.slider-image {
  width: 100%;
  height: 100%;
  border-radius: 20rpx;
}

.slider-text {
  position: absolute;
  bottom: 40rpx;
  left: 20rpx;
  color: white;
  font-size: 24rpx;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
}

.section {
  width: 100%;
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  text-align: center;
}

.content-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.text-content {
  flex: 1;
  padding: 0 20rpx;
}

.image-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.intro-image,
.expert-image,
.university-image {
  width: 100%;
  height: 300rpx;
  border-radius: 10rpx;
}

.intro-text,
.expert-bio,
.university-desc {
  font-size: 28rpx;
  line-height: 1.6;
  color: #333;
}

.expert-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.expert-title {
  font-size: 28rpx;
  color: #007AFF;
  display: block;
  margin-bottom: 20rpx;
}

.university-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.workflow-image {
  width: 100%;
  border-radius: 10rpx;
}

.logo-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.partner-logo {
  width: 200rpx;
  height: 100rpx;
  margin: 10rpx;
}

.contact-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-info text {
  margin: 10rpx 0;
  font-size: 28rpx;
}
</style>
